<template>
    <div class="content">
        <a-card class="card">
            <div class="header">
                <div class="button">
                    <a-space>
                        <a-button type="primary">备份</a-button>
                        <a-button type="primary" danger>删除</a-button>
                        <a-button type="primary">还原</a-button>
                    </a-space>

                </div>
                <div class="searchForm">
                    <a-form :model="searchForm">
                        <a-form-item label="">
                            <a-input-search
                                v-model:value="searchForm.name"
                                placeholder="请输入名称"
                                enter-button="搜索"
                                size="large"
                                @search="onSearch"
                            />
                        </a-form-item>
                    </a-form>
                </div>
            </div>
            <div class="tableBox">
                <a-table :loading="loading"
                         :dataSource="tableData"
                         :row-selection="rowSelection"
                         :pagination="pagination"
                         :indentSize="2000"
                         :columns="columns">
                    <template #button="{ text}">
                        <span style="color: #4EB1F7" v-if="text">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #show="{ text}">
                        <span style="color: #4EB1F7" v-if="text">是</span>
                        <span v-else style="color: #0FBA8E">否</span>
                    </template>
                    <template #action>
                        <a-button type="link">编辑</a-button>
                    </template>
                </a-table>
            </div>
        </a-card>
    </div>
</template>

<script>
import {defineComponent, ref, reactive, toRefs, onMounted} from "vue";
import {getDataBack} from "../../../api";
export default defineComponent({
    name: "index",
    setup() {
        const tableDataObj = reactive({
            loading: false,
            tableData: [
                {}
            ],
            pagination: {
                current: 1,
                pageSize: 10,
                total: 1,
                showSizeChanger: true,
                showTotal: (total) => {
                    return `共 ${total} 条`
                }
            },
            scroll: { x: 1000, y: 300 },
            columns: [
                {
                    title: "序号",
                    // width: 50,
                    align: 'center',
                    customRender: (text) => `${text.index + 1}`
                },
                {
                    title: "角色名称",
                    dataIndex: "name",
                    key: "name",
                    align: 'center',
                    // width: 120,
                    ellipsis: true
                },
                {
                    title: "角色状态",
                    dataIndex: "url",
                    align: 'center',
                    // width: 160,
                    key: "url",
                    ellipsis: true
                },
                {
                    title: "角色备注",
                    dataIndex: "menuPermission",
                    key: "menuPermission",
                    align: 'center',
                    // width: 150,
                    ellipsis: true
                },

                {
                    title: "添加时间",
                    dataIndex: "updateTime",
                    align: 'center',
                    key: "updateTime",
                    // width: 200,
                    ellipsis: true
                },
                // {
                //     title: "操作",
                //     key: "action",
                //     align: 'center',
                //     width: 150,
                //     slots: {
                //         customRender: "action"
                //     }
                // }
            ]
        })
        const searchForm = reactive({
            name: ''
        })
        // table 行选择
        const rowSelection = reactive({
            selectedRowKeys: [],
            onChange: (selectedRowKeys, selectedRows) => {
                rowSelection.selectedRowKeys = selectedRowKeys
                console.log(rowSelection.selectedRowKeys)
            }
        })

        // 获取数据备份
        const getData = () => {

        }
        onMounted(()=> {
            getData()
        })

        return{
            ...toRefs(tableDataObj),
            searchForm,
            rowSelection
        }
    }
})
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    height: 100%;

    .card {
        height: 100%;
        //background: #364d79;
        margin: 10px;

        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;

            .button {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 15px;
            }
        }
    }
}
</style>